<header class="fd-page__header">
  <div class="fd-action-bar">
    <div class="fd-action-bar__header">
      <h1 class="fd-action-bar__title">Luigi Angular Example</h1>
    </div>
    <p class="fd-action-bar__description">
      Follow the links below to the Luigi feature demos.
    </p>
  </div>
</header>

<section class="fd-section">
  <div class="fd-layout-panel">
    <div class="fd-layout-panel__header">
      <div class="fd-layout-panel__head">
        <h3 class="fd-layout-panel__title">LuigiClient Features</h3>
      </div>
    </div>
    <div class="fd-layout-panel__body">
      <ul class="fd-list">
        <li
          class="fd-list__item clickable"
          *ngFor="let item of luigiClientItems"
          (click)="item.clickHandler()"
        >
          <strong>{{ item.text }}</strong>
          &nbsp;&ndash;&nbsp;<span>{{ item.description }}</span>
        </li>
      </ul>
    </div>
  </div>
</section>

<section class="fd-section">
  <div class="fd-layout-panel">
    <div class="fd-layout-panel__header">
      <div class="fd-layout-panel__head">
        <h3 class="fd-layout-panel__title">Luigi Core Features</h3>
      </div>
    </div>
    <div class="fd-layout-panel__body">
      <ul class="fd-list">
        <li
          class="fd-list__item clickable"
          *ngFor="let item of luigiCoreLinks"
          (click)="linkManager().navigate(item.link)"
        >
          <strong>{{ item.text }}</strong> &nbsp;&ndash; {{ item.description }}
        </li>
        <li class="fd-list__item">
          <div class="fd-form-item">
            <label class="fd-switch fd-switch--compact" for="ImBw4551">
              <span class="fd-switch__control">
                <input
                  type="checkbox"
                  class="fd-switch__input"
                  [(ngModel)]="isDirty"
                  (change)="sendDirtyEvent()"
                  id="ImBw4551"
                />
                <div class="fd-switch__slider">
                  <div class="fd-switch__track">
                    <span
                      class="fd-switch__handle"
                      role="presentation"
                      data-testid="toggle-dirty-state"
                    ></span>
                  </div>
                </div>
              </span>
            </label>
          </div>
          <p *ngIf="!isDirty">
            <strong>There are no unsaved changes</strong> &nbsp;&ndash; toggle this to be
            asked for confirmation when you leave this page
          </p>
          <p *ngIf="isDirty">
            <strong>There are unsaved changes</strong> &nbsp;&ndash; a confirmation modal
            will appear when you navigate
            <a
              class="fd-link"
              title="Navigate to /projects/pr2 as an example"
              (click)="linkManager().navigate('/projects/pr2')"
            >
              somewhere else
            </a>
          </p>
        </li>
        <li class="fd-list__item clickable" (click)="updateBadgeCounters()">
          <strong>Update Header Navigation</strong> &nbsp;&ndash; Updates the top
          navigation, eg. to update badge counters
        </li>
        <li
          class="fd-list__item clickable"
          (click)="linkManager().navigate('/projects/pr1/settings_ft?ft=ft1')"
        >
          <strong>Apply Feature toggle 'ft1'</strong> &nbsp;&ndash; Display/hide
          navigation nodes or content in the micro frontend
        </li>
      </ul>
    </div>
  </div>
</section>
<section class="fd-section">
  <div class="fd-layout-panel luigi__margin-bottom--small">
    <div class="fd-layout-panel__header">
      <div class="fd-layout-panel__head">
        <h3 class="fd-layout-panel__title">
          Open PR1 settings in a modal
        </h3>
      </div>
    </div>
    <div class="fd-layout-panel__body">
      <button
        class="fd-button"
        data-testid="open-pr1-settings-modal"
        (click)="linkManager().openAsModal('/projects/pr1/settings')"
      >
        Open PR1 settings in a modal
      </button>
    </div>
  </div>
</section>
